<template>
    <view class="footer">
        <view class="flex justify-start items-center gap-[10px] text-[#fff]">
            <view class="max-md:hidden">
                <up-icon name="/static/land.svg" size="65" />
            </view>
            <view class="flex flex-col gap-[10px]">
                <view class="text-[17px]">{{ $t("common.footer.text1") }}</view>
                <view class="text-[12px]">
                    <view>{{ $t("common.footer.text2") }}</view>
                    <view class="mt-[5px]">{{ $t("common.footer.text3") }}</view>
                </view>
                <view class="flex gap-[10px] max-md:hidden">
                    <view class="cursor-pointer">
                        <uni-icons type="fire" size="20" color="#fff" />
                    </view>
                    <view class="cursor-pointer">
                        <uni-icons type="paperplane" size="20" color="#fff" />
                    </view>
                </view>
            </view>
        </view>
        <view>
            <view class="flex justify-center items-center gap-[10px]">
                <view class="flex justify-center items-center gap-[15px] max-md:hidden">
                    <view class="cursor-pointer text-[#fff]" @click="onAccount">{{ $t("common.head.text1") }}</view>
                    <view class="cursor-pointer text-[#fff]" @click="onBlocks">{{ $t("common.head.text2") }}</view>
                    <view class="cursor-pointer text-[#fff]" @click="onTransactions">
                        {{ $t("common.head.text3") }}
                    </view>
                </view>
                <view class="cursor-pointer bg-white w-[100px]">
                    <uni-data-select
                        v-model="locale"
                        :localdata="localeData"
                        :clear="false"
                        placement="top"
                        @change="onChange"
                    />
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref } from "vue"
import { navigateTo } from "@/utils/tools"

const locale = ref(uni.getLocale())
const localeData = [
    {
        text: "English",
        value: "en"
    },
    {
        text: "简体中文",
        value: "zh-Hans"
    }
]

const onChange = () => {
    uni.setLocale(locale.value)
    window.location.reload()
}

const onAccount = () => {
    navigateTo(`account`)
}

const onBlocks = () => {
    navigateTo(`blocks`)
}
const onTransactions = () => {
    navigateTo(`transactions`)
}
</script>
